<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<%@ page import = "jdbc.*" %>

<!DOCTYPE html>
<html lang="en">
     <head>
     <title>Contacts</title>
     <meta charset="utf-8">
     <meta name = "format-detection" content = "telephone=no" />
     <link rel="icon" href="images/favicon.ico" type="image/x-icon">
     <link rel="stylesheet" href="css/style.css">
     <link rel="stylesheet" href="css/font-awesome.min.css">
     <link rel="stylesheet" href="css/stuck.css">
     <link rel="stylesheet" href="css/contact-form.css" media="screen">
     <script src="js/jquery-1.11.1.min.js"></script>
     <script src="js/jquery-migrate-1.2.1.js"></script>
     <script src="js/jquery.easing.1.3.js"></script>
     <script src="js/jquery.ui.totop.js"></script>
     <script src="js/jquery.equalheights.js"></script>
	 <script src="js/script.js"></script>
     <script src="js/superfish.js"></script>
     <script src="js/jquery.mobilemenu.js"></script>
     <script src="js/tmStickUp.js"></script>
     <script src="js/TMForm.js"></script>
     <script src="js/modal.js"></script> 
     <script src="js/sForm.js"></script>
     <link rel="stylesheet" href="css/jquery.fancybox-1.3.4.css">
     <link rel="stylesheet" href="css/sForm.css">
     <script src="js/jquery.fancybox-1.3.4.js"></script>
     <script src="js/sForm.js"></script>
     <!--[if lt IE 8]>
       <div style=' clear: both; text-align:center; position: relative;'>
         <a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home?ocid=ie6_countdown_bannercode">
           <img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today." />
         </a>
      </div>
    <![endif]-->
    <!--[if lt IE 9]>
   		<script src="js/html5shiv.js"></script>
    	<link rel="stylesheet" type="text/css" media="screen" href="css/ie.css">
    <![endif]-->
     </head>
     <body>
     
     
	<%@ include file = "./header.jsp" %>
<!--======= Content ================================-->


<!--======= Contact & Feedback =======-->
<div class="content contact" style = "background: antiquewhite;">
    <div class="container">
        <h3 style="font-family: '微软雅黑';">
        <% 
        boolean valid = true;
        if (request.getParameter("uemail") != null) {
        	valid = false;
        	email_status = request.getParameter("uemail");
        	user_info = new JdbcDao().getAllPersonalInfo(email_status);
        }
        if (email_status != null) 
        	out.print(email_status + "<br>账户信息");
        else
        	out.print("新建课程");
        %>
        </h3>

        <div class="row">
            <div class="grid_4">
                <div class="contact_details" style= "font-family: 'Corbel'; font-size: initial">
                    <p class="adrress">联系我们 </p>
                    <p class="adrress">清华大学紫荆公寓 2#102A</p>
                    <p><span>Freephone:</span>+1 800 000 0000</p>
                    <p><span>Telephone:</span>+1 800 000 0000</p>
                    <p><span>IP:</span>166.111.8.28</p>
                    <p class="mail"><span>E-mail:</span> <a href="mailto:mail@suck.org">mail@suck.org</a></p>
                </div>
            </div>
            <div class="grid_8">
                <form id="contact-form" onload="alert(122);">
                  <div class="contact-form-loader"></div>
                  <fieldset style = "font-style: italic; font-family: 'Arial'; color: tan;">
                  	<% if (email_status != null) { %>
                  	
    <style type="text/css">
    #contact-form ._placeholder {text-align: right;}
    </style>
                    <% } else { %>
                    <label class="email">
                      <input type="text" name="email" placeholder="Email:" value="" data-constraints="@Required @Email" />
                      <span class="empty-message">*This field is required.</span>
                      <span class="error-message">*This is not a valid email.</span>
                    </label>
                    <% } %>
                    <% if (valid) {%>
                    <label class="password">
                      <input id = "password" type="password" name="password" placeholder="Password:" 
                      	value="" 
                      	data-constraints="@Required @Length(min=2,max=100)" />
                      <span class="empty-message">*This field is required.</span>
                      <span class="error-message">*This is not a valid password.</span>
                    </label>
                    <label class="password_again">
                      <input type="password" name="password1" placeholder="Password Again:" value="" data-constraints="@Required @PasswordAgain" />
                      <span class="empty-message">*This field is required.</span>
                      <span class="error-message">*Password doesn't match.</span>
                    </label>
                    <% } %>
                    <label class="realname">
                      <input type="text" name="realname" placeholder="Real Name:" 
                      value="<% if (email_status != null) out.print(user_info.get("realname")); %>" 
                      data-constraints="@Required @Length(min=2,max=100)"  />
                      <span class="empty-message">*This field is required.</span>
                      <span class="error-message">*This is not a valid name.</span>
                    </label>
                    <label class="birthdate">
                      <input type="text" name="birthdate" placeholder="Birth date(YYYY-MM-DD):"
                      value="<% if (email_status != null) out.print(user_info.get("birthdate")); %>"  
                      data-constraints="@Required @Date"  />
                      <span class="empty-message">*This field is required.</span>
                      <span class="error-message">*Date format invalid (YYYY-MM-DD).</span>
                    </label>
                    <label class="nickname">
                      <input type="text" name="nickname" placeholder="Nick Name:"
                      value="<% if (email_status != null) out.print(user_info.get("nickname")); %>"  
                      data-constraints="@Required @Length(min=2,max=100)"  />
                      <span class="empty-message">*This field is required.</span>
                      <span class="error-message">*This is not a valid name.</span>
                    </label>
                    <label class="gender">
                      <input type="text" name="gender" placeholder="Gender (male/female):"
                      value="<% if (email_status != null) out.print(user_info.get("gender")); %>"  
                      data-constraints="@Required @Gender"  />
                      <span class="empty-message">*This field is required.</span>
                      <span class="error-message">*Date gender invalid (male or female).</span>
                    </label>
                    <label class="phone">
                      <input type="text" name="phonenumber" placeholder="Phone:" 
                      value="<% if (email_status != null) out.print(user_info.get("phonenumber")); %>"  
                      data-constraints="@Required @JustNumbers" />
                      <span class="empty-message">*This field is required.</span>
                      <span class="error-message">*This is not a valid phone.</span>
                    </label>
                    <label class="emercont">
                      <input type="text" name="emercont" placeholder="Emergency Contact Person:" 
                      value="<% if (email_status != null) out.print(user_info.get("emercont")); %>" 
                      data-constraints="@Required @Length(min=2,max=100)"  />
                      <span class="empty-message">*This field is required.</span>
                      <span class="error-message">*This is not a valid name.</span>
                    </label>
                    <label class="emercontnum">
                      <input type="text" name="emercontnum" placeholder="Emergency Contact Phone number:" 
                      value="<% if (email_status != null) out.print(user_info.get("emercontnum")); %>" 
                      data-constraints="@Required @Length(min=2,max=100)"  />
                      <span class="empty-message">*This field is required.</span>
                      <span class="error-message">*This is not a valid phone number.</span>
                    </label>
                    <label class="address">
                      <input type="text" name="address" placeholder="Address:" 
                      value="<% if (email_status != null) out.print(user_info.get("address")); %>" 
                      data-constraints="@Required @Length(min=2,max=100)"  />
                      <span class="empty-message">*This field is required.</span>
                      <span class="error-message">*This is not a valid address.</span>
                    </label>
                    <label class="qq">
                      <input type="text" name="qq" placeholder="QQ number:" 
                      value="<% if (email_status != null) out.print(user_info.get("qq")); %>" 
                      data-constraints="@Required @JustNumbers" />
                      <span class="empty-message">*This field is required.</span>
                      <span class="error-message">*This is not a valid QQ number.</span>
                    </label>
                  	<% if (email_status == null) { %>
                    <label class="message">
                      <textarea name="message" placeholder="Self-introduction" data-constraints='@Required @Length(min=20,max=999999)'></textarea>
                      <span class="empty-message">*This field is required.</span>
                      <span class="error-message">*The message is too short.</span>
                    </label>
                    <% } %>
                    <% if (valid) {%>
                    <div class="btn-feedback">                   
                        <a class="link" data-type="reset">
                            <span class="link_text">Clear</span>
                            <span class="link_arrow">>></span>
                        </a>
                        <a class="link" data-type="submit">
                            <span class="link_text">Send</span>
                            <span class="link_arrow">>></span>
                        </a>
                    </div>
                    <% } %>
                  </fieldset> 
                  <div class="modal fade response-message">
                    <div class="modal-dialog">
                      <div class="modal-content">
                        <div class="modal-header">
                          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                          <h4 class="modal-title">Modal title</h4>
                        </div>
                        <div class="modal-body">
                          You message has been sent! We will be in touch soon.
                        </div>      
                      </div>
                    </div>
                  </div>
                </form>
            </div>
        </div>
    </div>
</div>



<!--======= Footer =================================-->

<%@ include file = "./footer.jsp" %>

</body>
</html>